import {
  transformerDirectives,
  defineConfig,
  presetAttributify,
  presetUno,
  presetIcons,
  presetMini,
  presetTypography,
  presetWebFonts,
  transformerVariantGroup,
  transformerAttributifyJsx,
  transformerCompileClass,
} from "unocss";
import presetRemToPx from "@unocss/preset-rem-to-px";
import { designW, divisor } from "./src/config/app";
/**
 * 定义并导出一个 UnoCSS 配置对象。
 * 该配置对象包含了主题、预设、快捷方式、自定义规则和转换器等配置项。
 *
 * @returns {Object} 返回一个 UnoCSS 配置对象，包含主题、预设、快捷方式、自定义规则和转换器等配置。
 */
export default defineConfig({
  // 自定义规则配置，定义一些自定义的 CSS 规则
  rules: [
    // 禁用文本选择
    [
      "disable-select-text",
      {
        "user-select": "none",
        "-moz-user-select": "none",
        "-ms-user-select": "none",
        "-khtml-user-select": "none",
      },
    ],
    // 根据数字设置文本溢出省略
    [
      /^text-ellipsis-(\d+)$/,
      (match) => {
        return {
          display: "-webkit-box",
          overflow: "hidden",
          "text-overflow": "ellipsis",
          "word-break": "break-all",
          "-webkit-line-clamp": match[1],
          "-webkit-box-orient": "vertical",
        };
      },
    ],

    // 根据设计宽度和除数设置最大宽度
    [
      /^max-w$/,
      () => {
        return { "max-width": designW * divisor + "px" };
      },
    ],
  ],
  // 快捷方式, 将多个规则组合成单个简写
  shortcuts: [
    // 居中对齐的 flex 布局
    { "flex-center": "flex justify-center items-center" },
    // 居中对齐的 grid 布局
    { "grid-center": "grid place-items-center" },
    // 按钮样式
    {
      btn: "py-2 px-4 font-semibold rounded-lg shadow-md cursor-pointer",
    },
    // 动态快捷方式，根据参数生成样式
    [
      /^btn-(.*)$/,
      ([, c]) =>
        `bg-${c} text-#fff hover:bg-${c}/80 py-2 px-4 font-semibold rounded-lg shadow-md cursor-pointer`,
    ],
    // 使用主题的动态快捷方式
    [
      /^appbd-(.*)$/,
      ([, c], { theme }) => {
        return `b-1 b-${c} b-dashed`;
      },
    ],
  ],

  // 主题配置，定义自定义颜色
  // class="text-app-primary text-app-secondary bg-app-primary bg-app-background text-app-text..."
  theme: {
    colors: {
      appPrimary: "var(--app-primary)",
      appSecondary: "var(--app-secondary)",
      appBackground: "var(--app-background)",
      appText: "var(--app-text)",
    },
  },
  // 预设配置，包含多个 UnoCSS 预设
  presets: [
    presetRemToPx({
      baseFontSize: 4, // 将 rem 转换为 px 的基础字体大小
    }),
    presetUno(), // UnoCSS 核心预设
    presetAttributify(), // 支持属性化 CSS
    presetIcons(), // 支持图标
    presetMini(), // 最小化预设
    // presetTagify(), // 支持标签化 CSS
    presetTypography(), // 支持排版
    presetWebFonts({
      fonts: {},
    }), // 支持 Web 字体
    // presetWind(), // Tailwind CSS 风格预设
    // presetWind3(), // Tailwind CSS v3 风格预设
    // presetWind4(), // Tailwind CSS v4 风格预设
  ],
  // 转换器配置，包含多个 UnoCSS 转换器
  transformers: [
    transformerDirectives(), // 支持指令
    transformerAttributifyJsx(), // 支持 JSX 属性化
    transformerCompileClass(), // 编译类名
    transformerVariantGroup(), // 支持变体组
  ],
});
